<template>
  <div>
    <div class="search-box" :class="{ hide: !isShowSearch }">
      <Form :model="formState" layout="inline" autocomplete="off">
        <!-- <FormItem label="文件名" name="title">
          <Input v-model:value="formState.filename" />
        </FormItem> -->
        <slot name="form"></slot>
        <FormItem>
          <a-button type="primary" @click="handleQuery">查询</a-button>
          <a-button @click="$emit('reset')">重置</a-button>
        </FormItem>
      </Form>
    </div>
    <div class="app-container">
      <div class="table-tool-bar">
        <Row>
          <Col :span="12">
            <slot name="toolBtn"></slot>
          </Col>
          <Col :span="12" class="right-icon">
            <Space>
              <Tooltip placement="bottom">
                <template #title> 显示/隐藏复选框 </template>
                <SplitCellsOutlined @click="handleObj" />
              </Tooltip>
              <Tooltip placement="bottom">
                <template #title> 显示/隐藏搜索栏 </template>
                <EyeInvisibleOutlined @click="handleSearch" />
              </Tooltip>
              <Popover trigger="click" placement="bottomRight" title="列设置">
                <SettingOutlined />
                <template #content>
                  <Tree
                    checkable
                    :tree-data="treeData"
                    :checked-keys="checkedKeys"
                    @check="handleCheck"
                  />
                </template>
              </Popover>
            </Space>
          </Col>
        </Row>
      </div>

      <Table
        :columns="innerColumns"
        :data-source="data"
        :pagination="pagination"
        :loading="tableLoading"
        :row-selection="obj"
        row-key="id"
        bordered
        @change="handlePage"
      >
        <template #bodyCell="{ record, column }">
          <template v-if="column.dataIndex === 'operation'">
            <slot name="operation" :record="record"></slot>
          </template>
          <slot name="format" :record="record" :column="column"></slot>
        </template>
      </Table>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { Table, Form, FormItem, Space, Row, Col, Tooltip, Tree, Popover } from 'ant-design-vue'
  import { SettingOutlined, SplitCellsOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue'
  import { ref, onMounted } from 'vue'

  // 搜索框
  const isShowSearch = ref(true)
  const handleSearch = () => {
    isShowSearch.value = !isShowSearch.value
  }

  // 表格 --start
  const prop = defineProps({
    columns: { require: true, type: Array },
    fuc: { require: true, type: Function },
    formState: { type: Object },
  })

  const innerColumns = ref<any>(prop.columns)

  const selectedRowKeys = ref<string[]>([])
  const selectChange = (changableRowKeys: string[]) => {
    selectedRowKeys.value = changableRowKeys
    console.log(selectedRowKeys.value)
  }
  const obj: any = ref(null)
  const handleObj = () => {
    if (obj.value) {
      obj.value = null
    } else {
      obj.value = {
        selectedRowKeys,
        onChange: selectChange,
      }
    }
  }

  const tableLoading = ref(false)

  const pagination = ref({
    current: 1,
    total: 0,
    showTotal: (t) => `总共 ${t} 条`,
  })

  // const formState = ref({})

  // eslint-disable-next-line vue/no-setup-props-destructure
  const columns2 = innerColumns.value

  const data = ref<any>([])

  const handleQuery = () => {
    console.log(prop.formState)
    tableLoading.value = true
    const param = {
      pageNum: pagination.value.current,
      pageSize: 10,
      ...prop.formState,
    }
    prop.fuc &&
      prop.fuc(param).then((res) => {
        tableLoading.value = false
        data.value = res.records
        pagination.value.total = res.total
      })
  }

  const handlePage = (pa) => {
    pagination.value.current = pa.current
    handleQuery()
  }

  onMounted(() => {
    handleQuery()
  })
  // 表格 --end
  const checkedKeys = ref<any>([])
  checkedKeys.value = innerColumns.value.map((e) => e.dataIndex)
  const treeData = innerColumns.value.map((e) => {
    return {
      title: e.title,
      key: e.dataIndex,
    }
  })
  const handleCheck = (ck) => {
    checkedKeys.value = ck
    innerColumns.value = columns2.filter((e) => ck.indexOf(e.dataIndex) > -1)
  }

  defineExpose({
    handleQuery,
  })
</script>

<style>
  .right-icon {
    text-align: right;
    padding-right: 10px;
    font-size: 16px;
  }
</style>
